<template>
	<view class="page-container">
		<!-- 顶部导航栏 -->
		<view class="header">
			<x-status-bar></x-status-bar>
			<view class="flex-center-between header-navbar">
				<x-back-btn></x-back-btn>
				<view class="u-f-40 common-title">{{ lang_address[type] }}</view>
				<view></view>
			</view>
		</view>

		<view class="bg-white">
			<view class="address-item flex-center">
				<view class="u-m-r-20 color-grew clear-flex">{{ lang_address.consignee }}:</view>
				<input
				v-model="form.name"
				 :placeholder="lang_address.consigneeTips"
				 maxlength="10"
				 style="width: 100%;"/>
			</view>
			
			<view class="address-item flex-center">
				<x-number-code @change="getAreaCode"></x-number-code>
				<input
				v-model="form.mobile"
				 :placeholder="lang_address.phoneNumberTips"
				 style="width: 100%;"/>
			</view>
			
			<view class="address-item flex">
				<view class="u-m-r-20 clear-flex color-grew">{{ lang_address.location }}:</view>
				<view class="flex-between" style="width: 100%;" @click="getArea">
					<view class="">{{ areaFormat || lang_address.locationTips }}</view>
					<u-icon name="right" custom-prefix="u" color="#ACACAC" size="24"></u-icon>
				</view>
			</view>
			
			<view class="address-item flex-center">
				<view class="u-m-r-20 clear-flex color-grew">{{ lang_address.detail }}:</view>
				<input
				v-model="form.address"
				 :placeholder="lang_address.detailTips"
				 style="width: 100%;"/>
			</view>
			
			<view class="address-item flex-center-between">
				<view class="u-m-r-20 clear-flex color-grew">{{ lang_address.defaultAddress }}:</view>
				
				<u-switch
				v-model="form.isDefault"
				size="48"
				active-color="#FF3A2F"
				></u-switch>
			</view>
		</view>
		
		<!-- 留空 -->
		<view style="height: 200rpx;"></view>
		
		<!-- 保存地址 -->
		<x-fixed-bottom>
			<view class="flex-center-center u-p-t-40 u-p-b-40">
				<x-common-btn @click="saveAction" :disabled="authSubmit">{{ lang_address.confirm }}</x-common-btn>
			</view>
		</x-fixed-bottom>
	</view>
</template>

<script>
	import { addressInfo, addressAddAddress, addressUpdateAddress } from '@/api/user/address.js'
	import areacode from '@/utils/areacode.js'
	export default {
		data() {
			return {
				areacodeObj: areacode.list[0],
				type: 'add',
				area: {},
				form: {},
				
				addressId: '',
				
				isClick: false
			}
		},
		computed: {
			areaFormat() {
				let str = '', area = this.area
				for (let key in area) {
					let item = area[key]
					item && item.title && (str = str + item.title + ',')
				}
				str && (str = str.slice(0, -1))
				return str
			},
			authSubmit() {
				let { name, mobile, address, isDefault } = this.form
				return !this.area.area || !name || !mobile
			}
		},
		onLoad({ type, addressId }) {
			this.addressId = addressId && addressId !== 'undefined' ? addressId : ''
			this.type = type
			if (this.addressId) {
				this.initInfo()
			}
		},
		methods: {
			getAreaCode(e) {
				this.areacodeObj = { ...e }
			},
			getArea() {
				uni.navigateTo({
					url: '/pages/other/city/city',
					events: {
						change: res => {
							this.area = res
						}
					},
					success: res => {
						res.eventChannel.emit('city-page', this.area)
					}
				})
			},
			// 保存地址
			saveAction() {
				let { name, mobile, address, isDefault } = this.form
				if (!name) {
					return this.$api.msg(this.lang_address.consigneeTips)
				} else if (!mobile) {
					return this.$api.msg(this.lang_address.phoneNumberTips)
				}
				if (!this.area.area) return this.$api.msg(this.lang_address.addrssTips)
				let areaObj = {}
				for (let key in this.area) {
					areaObj[key] = this.area[key].title
					areaObj[key + 'Id'] = this.area[key][key  + 'Id']
				}
				let queryObj = { name, mobile, ...areaObj, address, isDefault: isDefault ? 1 : 0 }
				if (this.addressId) {
					queryObj.addressId = this.addressId
				}
				if (this.isClick) return;
				this.isClick = true
				let queryFn = fn => fn(queryObj).then(() => {
					this.$api.msg('提交成功')
					let timer = setTimeout(() => {
						this.isClick = false
						this.jumpBack()
					}, 1000)
				}).catch(() => {
					this.isClick = false
				})
				queryFn(this.type === 'add' ? addressAddAddress : addressUpdateAddress)
			},
			
			// 获取地址详情
			initInfo() {
				addressInfo({ addressId: this.addressId }).then((result) => {
					let keys = ['name', 'mobile', 'address', 'isDefault'];
					keys.map(item => {
						this.$set(this.form, item, item !== 'isDefault' ? result[item] : !!result[item])
					})
					let areaKeys = ['country', 'province', 'city', 'area']
					areaKeys.map(item => {
						this.$set(this.area, item, {
							title: result[item],
							[item + 'Id']: result[item + 'Id']
						})
					})
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.address {
		&-item {
			padding: 44rpx 30rpx 40rpx 34rpx;
			height: 110rpx;
			width: 100%;
			border-bottom: 2rpx solid #f9f9f9;
		}
	}
</style>
